<template>
  <div class="qw">
    <!-- 头部组件 -->
    <el-card class="box-card">
      <!-- table表单 -->
      <el-form
        ref="form"
        :model="formDate"
        label-width="80px"
        inline
        style="height: 36px"
      >
        <!-- 工单编号 -->
        <el-form-item label="工单编号:">
          <el-input
            v-model="formDate.taskCode"
            size="medium"
            placeholder="请输入"
          />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 头部下面组件 -->
    <div>
      <el-card class="card">
        <el-button
          type="primary"
          icon="el-icon-circle-plus"
          size="small"
          @click="newAdd"
        >新建</el-button>
        <!-- 表格组件 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="180"
            align="center"
          />
          <el-table-column prop="name" label="区域名称" width="180" />
          <el-table-column prop="nodeCount" label="点位数量" align="center" />
          <el-table-column prop="remark" label="备注" align="center" />
          <el-table-column prop="address" label="操作" align="center">
            <template #default="scope">
              <el-button
                type="text"
                @click="look(scope.row)"
              >查看详情</el-button>
              <el-button type="text" @click="rework(scope.row)">修改</el-button>
              <el-button
                type="text"
                style="color: red"
                @click="del(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页显示 -->
        <el-pagination
          :current-page="params.pageIndex"
          :page-size="params.pageSize"
          layout=" prev, pager, next"
          :total="+totalCount"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 查看详情弹窗 -->
      <div class="container">
        <el-dialog
          title="区域详情"
          :visible="dialog"
          width="30%"
          @close="dialogClose"
          @open="dialogOpen"
        >
          <div class="top">
            <span>区域名称:{{ name }} </span>
          </div>
          <div class="bottom">
            <div class="box">包含点位:</div>
            <el-table :data="List" style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="100"
                align="center"
              />
              <el-table-column
                prop="businessType.name"
                label="点位名称"
                width="100"
              />
              <el-table-column
                prop="vmCount"
                label="设备数量"
                width="100"
                align="center"
              />
            </el-table>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 新建的弹窗组件 -->
    <Addialog
      :code="code"
      :dialog-visible="dialogVisible"
      @close="closeFn"
      @newAdd="fetchNewList"
    />
  </div>
</template>

<script>
import { areaList, lookup, delpost } from '@/api'
import Addialog from './components/Addialog'
export default {
  components: {
    Addialog
  },
  data() {
    return {
      name: '',
      formDate: {
        // 表单数据
        taskCode: ''
      },
      params: {
        // 获取页面数据的接口传值
        pageIndex: 1,
        pageSize: 10,
        regionId: ''
      },
      totalCount: 0,
      tableData: [], // 表格数据
      dialogVisible: false, // 新建的弹窗变量
      dialog: false, // 查看详情弹窗变量
      List: [], // 查看详情的数据
      code: {} // 修改时传的
    }
  },
  created() {
    this.fetchNewList()
  },
  methods: {
    // 点击删除
    del(val) {
      this.regionId = val.id
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delpost(this.params)
        })
        .catch(() => {
          console.log('错误')
        })
    },
    // 点击修改
    rework(val) {
      this.code = val
      this.dialogVisible = true
      // console.log(val)
    },
    // 查看详情
    look(val) {
      this.dialog = true
      this.name = val.name // 区域名
      console.log(val)
      this.params.regionId = val.id
    },
    async dialogOpen() {
      // 查看详情打开时的回调
      const res = await lookup(this.params)
      this.List = res.data.currentPageRecords
    },
    dialogClose() {
      //  查看详情关闭
      this.dialog = false
    },
    // 点击新建
    newAdd() {
      this.dialogVisible = true
    },
    closeFn() {
      // 字传父关闭弹窗
      this.dialogVisible = false
      this.code = {} // 手动清空
    },
    // 点击分页翻页
    handleCurrentChange(val) {
      this.params.pageIndex = val
      this.fetchNewList()
    },
    // 获取页面数据的方法
    async fetchNewList() {
      const { data } = await areaList(this.params)
      // console.log(data)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
    }
  }
}
</script>

<style lang="scss">
.qw {
  margin-top: 70px;
  margin-left: 20px;
  margin-right: 10px;
}
.card {
  margin-top: 15px;
}
.bottom {
  display: flex;
  justify-content: left;
}
.top {
  margin-bottom: 30px;
}
.box {
  padding-top: 20px;
  margin-right: 10px;
}
</style>
